<template>
  <div class="home">
    <img src="../../assets/images/2.jpg" alt="" width="100%">

    <!-- 疫情信息 -->
    <CavInfo :cavDesc="cavDesc" :cavNews="cavNews"></CavInfo>

    <!-- 四个导航栏 -->
    <ul class="litNav">
      <li>
        <img src="../../assets/images/icon-01.png" alt="">
        <div>免费问诊</div>
      </li>
      <li>
        <img src="../../assets/images/icon-02.png" alt="">
        <div>核酸检测</div>
      </li>
      <li>
        <img src="../../assets/images/icon-03.png" alt="">
        <div>防疫物资</div>
      </li>
      <li>
        <img src="../../assets/images/icon-04.png" alt="">
        <div>出行政策</div>
      </li>
    </ul>

    <!-- 数据统计 -->
    <div class="dataNum">
      
    </div>

  </div>
</template>

<script>
import CavInfo from './cavInfo/cavInfo.vue'
import api from '../../api/index.js'

export default {
  name: 'Home',
  components: {
    CavInfo
  },
  data(){
    return {
      cavDesc: {}, //病毒简介
      cavNews: [], // 疫情信息
    }
  },
  created(){
    api.getCovInfo().then((res) => {
      console.log(res.data)
      let data = res.data.newslist[0].desc
      // 病毒信息的简介
      this.cavDesc = {
        note1: data.note1,
        note2: data.note2,
        note3: data.note3,
        remark1: data.remark1,
        remark2: data.remark2,
        remark3: data.remark3
      }

      // 疫情热点得简介
      this.cavNews = res.data.newslist[0].news
      
    })
  }
}
</script>
<style scoped lang="scss">
.home{
  font-size: .12rem;
}
.litNav{
  display: flex;
  justify-content: space-evenly;
  li{
    width: 15%;
    text-align:center;
    img{
      width: 100%;
    }
  }
}
</style>
